<template>
	<view class="content">
		<button type="primary" @click="btnTakePhoto">从相册或拍照选择图片1</button>
		<image :src="imagefile" style="width: 100%;" mode="widthFix"></image>
			<view v-if="recResults.length>0" style="width: 100%;border:1px solid #ccc;border-radius: 10px;padding:10px;margin-top: 10px;">
				<view style="text-align: center;font-size: 14px;color: #999;">识别结果</view>
				<view v-if="selectedName==''" v-for="(item,index) in recResults" :key="index" @click="selectRecResult(index)" style="display: flex;height: 50px;line-height: 50px;">
					<view style="flex: 1;">{{item.keyword}}</view>
					<view>{{(item.score.toFixed(2)*100)+'%'}}</view>
				</view>
				<view v-if="selectedName!=''" style="text-align: center;height: 30px;line-height: 30px;">
					{{selectedName}}
				</view>
				<view v-if="searchResults">
					<view v-if="searchResults.matched" style="width: 100%;text-align: center;">{{searchResults.matched.typename}}</view>
					<view v-else style="font-size: 14px;">
						<view v-for="(item,index) in searchResults.similars" :key="index" style="display: flex;">
							<view style="flex: 1;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;margin-right: 20px;">{{item.keywords}}</view>
							<view>{{item.typename}}</view>
						</view>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				recResults:[],
				searchResults:null,
				selectedName:"",
				imagefile: ''
			}
		},
		onLoad() {

		},
		methods: {
			// 1.先从相册或者拍照获取一张图片
			btnTakePhoto() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.imagefile = res.tempFilePaths[0]
						this.imageToBase64(this.imagefile)
					}
				})
			},
			// 2.图片转成base64
			imageToBase64(filepath){
				// #ifdef MP-WEIXIN
				// 微信小程序 -条件编译
				wx.getFileSystemManager().readFile({
					filePath: filepath,
					encoding: "base64",
					success: (res) => {
						this.imageClassify(res.data)
					}
				})
				// #endif
				// #ifdef APP-PLUS
				// ios或android -条件编译
				plus.io.resolveLocalFileSystemURL(
					this.imagepath,
					(entry)=>{
						entry.file( ( file ) => {
							let reader = new plus.io.FileReader();
							reader.onloadend = (e) =>{
								const base64 = e.target.result.substr(22);
								this.imageClassify(base64);
							};
							reader.readAsDataURL( file );
						});
					}
				);
				// #endif
			},
			// 3.调用百度图像识别的API
			async imageClassify(b64) {
				uniCloud.callFunction({
					name: 'ImageClassify',
					data: {
						imageb64: b64
					},
					success: (res) => {
						this.parseResult(res.result.result)
					}
				})
			},
			// 4.展示图片识别结果
			parseResult(result) {
				this.recResults = result
				var itemList = []
				var absResultIndex
				for (var i = 0; i < result.length; i++) {
					// 相识度大于70%，默认当前结果
					if(result[i].score > 0.7) {
						absResultIndex = i
						break;
					}
					itemList.push(result[i].keyword + '' + result[i].score)
				}
				if(absResultIndex >=0) {
					this.selectRecResult(absResultIndex)
					return
				}
				uni.showActionSheet({
					itemList: itemList,
					success: (res) => {
						this.selectRecResult(res.tapIndex)
					}
				})
			},
			// 5.使用图片识别的结果去查询垃圾分类
			async selectRecResult(index){
				this.selectedName=this.recResults[index].keyword;
				const searchRes = await this.searchKeyword(this.selectedName);
				this.searchResults = searchRes;
			},
			searchKeyword(kw) {
				return new Promise((resolve,reject)=>{
					uniCloud.callFunction({
						name: 'TrashClassify',
						data: {
							keyword: kw
						},
						success: (res) => {
							resolve(res.result);
						}
					})
				})
			},
		}
	}
</script>

<style>
	view
	{
		box-sizing: border-box;
	}
	.content {
		padding: 0 2%;
		margin-top: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

